<template>
    <div style="background-color: white;margin: 30px;padding: 30px;">
    <el-form
      ref="ruleFormRef"
      style="max-width: 1300px"
      :model="ruleForm"
      :rules="rules"
      label-width="auto"
      class="demo-ruleForm"
      :size="formSize"
      status-icon
    >
 
 
      <el-form-item label="处方明细" prop="name">
        <el-tag type="success"  >本项目金额合计为：{{totalAmount}}</el-tag>
        <el-table
    ref="multipleTableRef"
    :data="gridData"
    style="width: 100%"
    @selection-change="handleSelectionChange"
    size="mini"
  >
    <el-table-column type="selection" :selectable="selectable" width="55" />
    <el-table-column type="expand" :selectable="selectable" width="55" >
      <template #default="props">
        <div m="4">
        <el-tag></el-tag>
        <el-tag></el-tag>
        <el-tag></el-tag>
        <el-tag></el-tag>
        <el-tag></el-tag> 
        <el-tag></el-tag>
        </div>
      </template>
    </el-table-column>
    <el-table-column label="药品名称" property="drugName" style="width: 120px;"/>
    <el-table-column property="drugFormat" label="规格" style="width: 120px;"/>
    <el-table-column property="address" label="用法用量" />
    <el-table-column property="drugPrice" label="单价" style="width:60px"/>
    <el-table-column property="count" label="数量" style="width: 200px;">
      <template #default="scope">
              <div style="display: flex; align-items: center; justify-content: space-between;">
                <el-button type="primary" style="width: 30px;" @click="increaseCount(scope.row)">+</el-button>
                <el-button type="info"  style="width: 30px; margin: 0 10px;" >{{ count }}</el-button>
                <el-button type="primary" style="width: 30px;" @click="decreaseCount(scope.row)">-</el-button>
              </div>
            </template>
</el-table-column>


    <el-table-column label="操作" width="300">
  <template #header >
    <el-button plain @click="dialogVisible = true">
  增加
  </el-button>

  <el-dialog
    v-model="dialogVisible"
    title="添加药品"
    width="700"
    :before-close="handleClose"
  >
    <span>药品详情单</span>
    <el-form :model="form">
      <el-form-item label="药品名称" :label-width="formLabelWidth">
        <el-input v-model="form.drugName" autocomplete="off" />
      </el-form-item>
      <el-form-item label="药品助记码" :label-width="formLabelWidth">
        <el-input v-model="form.mnemonicCode" placeholder="请输入药品助记码">
        </el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" width:50px @click="selectDrugInfoByCodeOrName">搜索</el-button> 
      </el-form-item>
    </el-form>
    <el-table :data="gridData">
      <el-table-column type="selection" :selectable="selectable" ></el-table-column>
      <el-table-column property="drugCode" label="药品编码"  />
      <el-table-column property="drugName" label="药品名称"  />
      <el-table-column property="drugFormat" label="药品规格" />
      <el-table-column property="drugUnit" label="药品单价" />
      <el-table-column property="drugUnit" label="包装单位" />
      <el-table-column property="manufacturer" label="生产厂家" />
    </el-table>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="dialogVisible = false">
          确定
        </el-button>
      </div>
    </template>
  </el-dialog>
        <el-popconfirm title="确定?">
    <template #reference>
      <el-button>删除</el-button>
    </template>
  </el-popconfirm>
   
     <el-button type="success"  plain stype="margin:10px" >刷新</el-button>
  </template>
  </el-table-column> 
  </el-table>
</el-form-item>     



      <el-form-item>
        <el-button style="margin-left: 300px;width: 100px;"  type="primary" @click="submitForm(ruleFormRef)">提交</el-button>
        <el-button  style="margin-left: 300px;width: 100px;"   @click="goToBookIndex">首页</el-button>
      </el-form-item>
    
    </el-form>
 
</div>
  </template>
  
  <script lang="ts" setup name="Prescription">
  import { computed, reactive, ref } from 'vue'
  import type { ComponentSize, FormInstance, FormRules } from 'element-plus'
  import type { TableInstance } from 'element-plus'
 import router from '@/router';
 
import { ElMessageBox } from 'element-plus'
import axiosInstance from '@/utils/axiosUtils';
import { ta } from 'element-plus/es/locale';
const parentBorder = ref(false)
const childBorder = ref(false)
const dialogTableVisible = ref(false)
const dialogFormVisible = ref(false)
const formLabelWidth = '70px'
const count = ref(1);
const form = reactive({
  drugName: '',
  mnemonicCode: '',
})
 

 
const tableData = ref([]);
const gridData =ref([])
const dialogVisible = ref(false)

const handleClose = (done: () => void) => {
  ElMessageBox.confirm('Are you sure to close this dialog?')
    .then(() => {
      done()
    })
    .catch(() => {
      // catch error
    })
}
interface User {
  id: number
  date: string
  name: string
  address: string
}
const goToBookIndex = () => {
    
  router.push({ name: 'bookIndex' })
}
const multipleTableRef = ref<TableInstance>()
const multipleSelection = ref<User[]>([])
    const handleSelectionChange = (val: User[]) => {
  multipleSelection.value = val
}
const params: { mnemonicCode?: string; drugName?: string } = {};
    if (form.mnemonicCode) {
        params.mnemonicCode = form.mnemonicCode;
    }
    if (form.drugName) {
        params.drugName = form.drugName;
    }
const selectable = (row: User) => ![1, 2].includes(row.id)

  interface RuleForm {
    name: string
    
  }
  
  const formSize = ref<ComponentSize>('default')
  const ruleFormRef = ref<FormInstance>()
  const ruleForm = reactive<RuleForm>({
    name: null,
 
  })
const  getDrugInfo=()=>{
axiosInstance.get('/api/druginfo/getDrugInfo').then((res) => {
  console.log(res.data)
  tableData.value = res.data
})
}
getDrugInfo()
const selectDrugInfoByCodeOrName = () => {
  const params: { mnemonicCode?: string; drugName?: string } = {};
    if (form.mnemonicCode) {
        params.mnemonicCode = form.mnemonicCode;
    }
    if (form.drugName) {
        params.drugName = form.drugName;
    }
  axiosInstance.get('/api/druginfo/getDrugInfoByCodeOrName', {
    params: {
      drugName: form.drugName,
      mnemonicCode: form.mnemonicCode,
    },
    }).then((res) => {
      console.log(res.data)
      res.data.forEach((item) => {
        gridData.value.push(item)
        // tableData.value.push(item)
        
      })
   
    })
}
 
  const locationOptions = ['Home', 'Company', 'School']
  
  const rules = reactive<FormRules<RuleForm>>({
    name: [
      { required: true, message: 'Please input Activity name', trigger: 'blur' },
      { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' },
    ]
  })
  
  const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
      if (valid) {
        console.log('submit!')
      } else {
        console.log('error submit!', fields)
      }
    })
  }
  // 计算总金额
const totalAmount = computed(() => {
  return tableData.value.reduce((sum, item) => sum + (item.drugPrice * item.count), 0);
});

// 增加数量
const increaseCount = (item) => {
 count.value += 1;
};

// 减少数量
const decreaseCount = (item) => {
  // 数量不能小于1
  if (count.value <= 1) return;
    count.value -= 1;
  
};
  const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
  }
  
  const options = Array.from({ length: 10000 }).map((_, idx) => ({
    value: `${idx + 1}`,
    label: `${idx + 1}`,
  }))
  </script>
